<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
         deferredSyntaxAllowedAsLiteral="true" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>航班管理</title>

    <script type="text/javascript" src="../js/jquery-3.4.1/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../js/bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-4.4.1-dist/css/bootstrap.css">

    <style type="text/css">
        .card {
            width: 95%;
            margin: 0 auto;
        }

        .card-body-top {
            margin-top: -10px;
            margin-bottom: 5px;
        }

        .top-right {
            float: right;
        }

        .top-right label {
            margin-right: 8px;
        }

        .top-right button {
            margin-left: 8px;
        }

        .zhong {
            text-align: center;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $("#customCheck").click(function () {
                if ($(this).prop("checked")) {
                    $("input[name='customTrCheck']").each(function () {
                        $(this).prop("checked", true);
                    });
                } else {
                    $("input[name='customTrCheck']").each(function () {
                        $(this).prop("checked", false);
                    });
                }
            });
            $("input[name='customTrCheck']").each(function () {
                $(this).click(function () {
                    $("#customCheck").prop("checked", false);
                });
            });
            $(".tr-body").each(function () {
                $(this).click(function () {
                    var check = $(this).find("input[name='customTrCheck']").prop("checked");
                    $(this).find("input[name='customTrCheck']").prop("checked", !check);
                    $("#customCheck").prop("checked", false);
                });
            });
            $("#addForm").submit(function () {
                var v1 = $("#sel1").val();
                var v2 = $("#sel2").val();
                if (v1 === v2) {
                    alert("起飞和降落地点不可以相同");
                    return false;
                }
                var flightStartTimeAdd = $("#flightStartTimeAdd").val();
                if (flightStartTimeAdd === null || flightStartTimeAdd === "") {
                    alert("空数据");
                    return false;
                }
            });
        });
    </script>

</head>
<body>
<div class="card shadow">
    <div class="card-body">
        <div class="card-body-top">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增</button>
            <button type="button" class="btn btn-danger" onclick="manageFlight(2)">删除</button>
            <button type="button" class="btn btn-warning text-white" onclick="manageFlight(3)">修改</button>
            <div class="top-right">
                <form class="form-inline" action="selectFlightByPage.do" method="post">
                    <label for="startTime">出发地</label>
                    <input type="text" class="form-control" name="flightStartArea" value="${flightStartArea }"
                           list="startAreaList">
                    <label for="startTime">目的地</label>
                    <input type="text" class="form-control" name="flightEndArea" value="${flightEndArea }"
                           list="startAreaList">
                    <label for="startTime">起飞时间</label>
                    <input type="text" class="form-control" id="startTime" name="flightStartTime"
                           readonly="readonly" onclick="WdatePicker()" value="${flightStartTime }">
                    <button type="submit" class="btn btn-success btn-search">搜索</button>
                </form>
            </div>
            <div class="modal fade" id="myModal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title">新增航班</h4>
                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                            <form action="addFlight.do" method="post" id="addForm">
                                <div class="form-group">
                                    <label for="sel1">开始地点</label>
                                    <input class="form-control" id="sel1" name="flightStartAreaId" list="startAreaList"/>
                                    <datalist id="startAreaList">
                                        <c:forEach items="${cityList }" var="city">
                                            <option>${city.cityName }</option>
                                        </c:forEach>
                                    </datalist>
                                </div>
                                <div class="form-group">
                                    <label for="sel2">降落地点</label>
                                    <input class="form-control" id="sel2" name="flightEndAreaId" list="endAreaList"/>
                                    <datalist id="endAreaList">
                                        <c:forEach items="${cityList }" var="city">
                                            <option>${city.cityName }</option>
                                        </c:forEach>
                                    </datalist>
                                </div>
                                <div class="form-group">
                                    <label for="flightStartTimeAdd">起飞时间</label>
                                    <input type="text" readonly="readonly" class="form-control" id="flightStartTimeAdd"
                                           onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',minDate:'%y-%M-%d #{%H+1}:%m:%s'})"
                                           required="required" name="flightStartTimeAdd">
                                </div>
                                <div class="form-group">
                                    <label for="flightPrice">航班价格</label>
                                    <input type="text" class="form-control" name="flightPrice" id="flightPrice"
                                           required="required">
                                </div>
                                <div class="form-group">
                                    <button type="submit" class="btn btn-secondary">添加</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <table class="table text-center table-hover">
            <thead>
            <tr>
                <th>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="customCheck" name="customCheck">
                        <label class="custom-control-label" for="customCheck">全选</label>
                    </div>
                </th>
                <th>开始地点</th>
                <th></th>
                <th>降落地点</th>
                <th>起飞时间</th>
                <th>落地时间</th>
                <th>航班价格</th>
                <th>航班状态</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${flightList }" var="flight">
                <tr class="tr-body">
                    <td>
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input" name="customTrCheck"
                                   id="${flight.flightId }" value="${flight.flightId }">
                            <label class="custom-control-label" for="${flight.flightId }"></label>
                        </div>
                    </td>
                    <td>${flight.flightStartArea.cityName }</td>
                    <td>---></td>
                    <td>${flight.flightEndArea.cityName }</td>
                    <td>${flight.flightStartTime }</td>
                    <td>${flight.flightEndTime }</td>
                    <td>${flight.flightPrice }</td>
                    <td>${flight.flightStatus.statusTypeName }</td>
                </tr>
            </c:forEach>
            <c:if test="${flightList.size()<=0 }">
                <tr>
                    <td colspan="7">
                        <h4>未查询到航班！</h4>
                    </td>
                </tr>
            </c:if>
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <div class="zhong">
            <a href="#" class="card-link" onclick="page(0)">首页</a>
            <c:forEach begin="1" end="${pageCount }" var="v">
                <a href="#" class="card-link" onclick="page(this)">${v }</a>
            </c:forEach>
            <a href="#" class="card-link" onclick="page(-1)">尾页</a>
        </div>
    </div>
</div>
<c:if test="${msg!=null }">
    <script type="text/javascript">
        alert("${msg}");
    </script>
</c:if>
</body>

<script type="text/javascript">
    function manageFlight(choose) {
        var flightIdArr = [];
        $("input[name='customTrCheck']").each(function () {
            if ($(this).prop("checked")) {
                flightIdArr.push($(this).val());
            }
        });
        if (flightIdArr.length <= 0) {
            alert("请至少选择一个航班！");
            return;
        }
        if (choose === 2) {
            location.href = "deleteFlight.do?flightIdArr=" + flightIdArr;
        } else if (choose === 3) {
            if (flightIdArr.length >= 2) {
                alert("最多只能选择一个航班！");
                return;
            }
            location.href = "toUpdateFlightJsp.do?flightId=" + flightIdArr[0];
        }
    }

    function page(obj) {
        var sdate = $("#startTime").val();
        var flightStartArea = $("input[name='flightStartArea']").val();
        var flightEndArea = $("input[name='flightEndArea']").val();
        if (obj === 0) {
            location.href = "selectFlightByPage.do?flightStartTime=" + sdate + "&flightStartArea="
                + flightStartArea + "&flightEndArea=" + flightEndArea;
        } else if (obj === -1) {
            location.href = "selectFlightByPage.do?nowPage=-1&flightStartTime=" + sdate + "&flightStartArea="
                + flightStartArea + "&flightEndArea=" + flightEndArea;
        } else {
            var nowPage = $(obj).text();
            location.href = "selectFlightByPage.do?nowPage=" + nowPage + "&flightStartTime=" + sdate + "&flightStartArea="
                + flightStartArea + "&flightEndArea=" + flightEndArea;
        }
    }
</script>
</html>